<template>
  <div class="wrapper">
    <!-- 表头 -->
    <div class="page_header">
      <!-- 医院名 -->
      <span class="pointer hosname">{{ hosname }}</span
      ><span class="m-r-10 m-l-10">|</span>
      <!-- 科室 -->
      <span>{{ depname1 }}</span
      ><span class="m-r-10 m-l-10">·</span>
      <!-- 诊室 -->
      <span>{{ depname2 }}</span>
    </div>
    <!-- 日期 -->
    <div class="schedule_container">
      <div class="schedule_title">2023年08月</div>
      <div class="schedule_list m-t-20 m-b-20">
        <!-- tag -->
        <el-check-tag
          style="margin-right: 8px"
          :class="`schedule_item_blue schedule_item m-r-20 pointer ${
            isActive === index ? 'active' : ''
          }`"
          @click="onclick(index,tag.workDate)"
          :checked="checked"
          :value="index"
          v-for="(tag, index) in scheduleRuleList?.bookingScheduleList"
          :key="tag.workDate"
        >
          <div class="date-wrapper m-b-10">
            <span>{{ tag.workDate }}</span
            >&nbsp;<span class="week">{{ tag.dayOfWeek }}</span>
          </div>
          <div class="detail">
            {{ tag.status === -1 ? "停止挂号" : "有号" }}
          </div>
        </el-check-tag>
        <!-- -tag-end -->

        <!-- pagination -->
        <div class="pagination">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :current-page="page"
            :page-size="limit"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </div>
        <!-- pagination-end -->
      </div>
    </div>
    <!-- 上午号源 -->
    <div data-v-41fcae55="" class="queue_item">
      <div data-v-41fcae55="" class="queue_title">
        <el-icon style="color: #409eff;font-size: 20px;"><Sunny /></el-icon>
        上午号源
      </div>
      <!-- 医师 -->
      <div data-v-41fcae55="" class="el-row queue m-t-20" v-for="hos in morningHos" :key="hos.id">
        <div data-v-41fcae55="" class="el-col el-col-18">
          <div data-v-41fcae55="" class="queue_left">
            <div data-v-41fcae55="" class="queue_left_top m-b-10">
              <span data-v-41fcae55="">{{ hos?.title }}</span
              ><span data-v-41fcae55="" class="m-r-10 m-l-10">|</span
              ><span data-v-41fcae55="">{{ hos.docname }}</span>
            </div>
            <div data-v-41fcae55="" class="queue_left_bottom">
              <span data-v-41fcae55=""
                >{{ hos.skill }}</span
              >
            </div>
          </div>
        </div>
        <div data-v-41fcae55="" class="el-col el-col-2">
          <div data-v-41fcae55="" class="queue_center">￥{{ hos.amount }}</div>
        </div>
        <div data-v-41fcae55="" class="el-col el-col-4">
          <button
            data-v-41fcae55=""
            class="el-button el-button--primary el-button--large"
            aria-disabled="false"
            type="button"
            style="width: 100px"
            @click="toStep2"
          >
            <!--v-if--><span class="">剩余{{ hos.availableNumber }}</span>
          </button>
        </div>
      </div>
      <!-- 医师end -->
    </div>
    <!-- 下午号源 -->
    <div data-v-41fcae55="" class="queue_item">
      <div data-v-41fcae55="" class="queue_title">
        <el-icon style="color: #409eff;font-size: 20px;"><Sunrise /></el-icon>
        下午号源
      </div>
      <!-- 医师 -->
      <div data-v-41fcae55="" class="el-row queue m-t-20" v-for="hos in afternoonHos" :key="hos.id">
        <div data-v-41fcae55="" class="el-col el-col-18">
          <div data-v-41fcae55="" class="queue_left">
            <div data-v-41fcae55="" class="queue_left_top m-b-10">
              <span data-v-41fcae55="">{{ hos.title }}</span
              ><span data-v-41fcae55="" class="m-r-10 m-l-10">|</span
              ><span data-v-41fcae55="">{{ hos.docname }}</span>
            </div>
            <div data-v-41fcae55="" class="queue_left_bottom">
              <span data-v-41fcae55=""
                >{{ hos.skill }}</span
              >
            </div>
          </div>
        </div>
        <div data-v-41fcae55="" class="el-col el-col-2">
          <div data-v-41fcae55="" class="queue_center">￥{{ hos.amount }}</div>
        </div>
        <div data-v-41fcae55="" class="el-col el-col-4">
          <button
            data-v-41fcae55=""
            class="el-button el-button--primary el-button--large"
            aria-disabled="false"
            type="button"
            style="width: 100px"
            @click="toStep2"
          >
            <!--v-if--><span class="">剩余{{ hos.availableNumber }}</span>
          </button>
        </div>
      </div>
      <!-- 医师end -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useRoute,useRouter } from "vue-router";

export default defineComponent({
  name: "registration_step_1",
});
</script>

<script setup lang="ts">
import { reqGetScheduleRule,reqFindScheduleList } from "@/api/registration";
import type { typeGetScheduleRule,typeFindSchedule } from "@/api/registration";
//数据1:获取路由对象
const route = useRoute();
const router = useRouter()
//数据2:保存路由传入的code
const code = ref("");
//数据3:路由传入的医院名
const hosname = ref("");
//数据4:路由传入的科室名
const depname1 = ref("");
//数据5:路由传入的诊室名
const depname2 = ref("");
//数据6:路由传入的医院code
const hoscode = ref("");
//数据7:路由传入的科室code
const depcode = ref("");
//数据8:排班数据 当前页
const page = ref(1);
//数据9:排班数据 每页条数
const limit = ref(6);
//数据10：科室排版规则
const scheduleRuleList = ref<typeGetScheduleRule>();
//数据11:排班tag点击绑定值
const checked = ref(false);
//数据12:排班选中active样式
const isActive = ref(0);
//数据13:分页总条数
const total = ref(0);
//数据14:排班数据(每天号源)
const findScheduleList = ref<typeFindSchedule[]>([])
//数据15:上午排班医师列表
const morningHos = ref<typeFindSchedule[]>()
//数据16:下午排班的医师列表
const afternoonHos = ref<typeFindSchedule[]>()

//方法1:获取科室排班规则数据
const getGetScheduleRule = async () => {
  try {
    const result = await reqGetScheduleRule(
      page.value,
      limit.value,
      hoscode.value,
      depcode.value
    );
    console.log("科室排班规则数据", result);
    scheduleRuleList.value = result;
    total.value = result.total;
  } catch (error) {}
};
//方法2:排班tag点击触发的事件
const onclick = (index: number,workDate:string) => {
  isActive.value = index;
   //获取(不同tag)的号源
  getFindScheduleList(workDate)
};
//方法3:当前页改变事件
const currentChange = (val: number) => {
  console.log("当前页", val);
  page.value = val;
  getGetScheduleRule();
};
//方法4:每页条数改变事件
const sizeChange = () => {};
//方法5:获取排班数据(获取每天号源)
const getFindScheduleList = async(workDate:string) =>{
  try {
   const result = await reqFindScheduleList(hoscode.value,depcode.value,workDate);
   console.log('每天号源',result);
   findScheduleList.value = result
   //获取上午的医师
  morningHos.value =  result.reduce((p:typeFindSchedule[],c:typeFindSchedule)=>{
    if(c.workTime===0){
      p.push(c)
    }
    return p
   },[])
  //下午的医师
  afternoonHos.value = result.reduce((p:typeFindSchedule[],c:typeFindSchedule)=>{
    if(c.workTime===1){
      p.push(c)
    }
    return p
   },[])
   
  } catch (error) {
    
  }
}
//方法6:剩余按钮点击事件(跳转到就诊人页面)
const toStep2 = () =>{
  router.push({
    path:`/hospital/registration/registration_step_2`
  })
}

onMounted(async() => {
  //初始化1:获取路由传参
  console.log("step_1/route", route.query);
  code.value = route.query.code as string;
  hosname.value = route.query.hosname as string;
  depname1.value = route.query.depname1 as string;
  depname2.value = route.query.depname2 as string;
  hoscode.value = route.query.hoscode as string;
  depcode.value = route.query.depcode as string;
  //初始化2:获取科室排班规则数据
 await getGetScheduleRule();
  //初始化3:每次刷新页面将上次active保存的下标至为1
 isActive.value = 0
 //初始化4:请求第一个tag数据对应的号源信息
 const val = scheduleRuleList.value?.bookingScheduleList[0].workDate
 console.log('val',val);
 
 getFindScheduleList(val as string)
});
</script>

<style scoped>
.wrapper {
  flex: 1;
  padding: 20px;
  font-size: 14px;
}

/* 日期 */
.schedule_container {
  margin-top: 50px;
}
.schedule_title {
  text-align: center;
  font-weight: bold;
}
.el-check-tag {
  background-color: #ffffff;
  border: 1px solid #409eff;
  width: 130px;
  height: 70px;
  padding: 0;
  margin: 15px;
  border-radius: 0;
  font-weight: 400;
}
.schedule_container .schedule_list {
  margin: 20px 0;
}
.schedule_container .schedule_list .schedule_item .date-wrapper {
  height: 30px;
  line-height: 30px;
  background-color: #e8f2ff;
  text-align: center;
  font-weight: 600;
}
.schedule_item .detail {
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.el-check-tag.is-checked {
  color: #9093a6;
}
.el-check-tag.is-checked:hover {
  background-color: #fff;
}
.active {
  border: 2px solid #409eff;
  color: #409eff;
  transform: scale(1.1);
  transition: all 0.3s ease-out;
}
/* 分页 */
.pagination {
  display: flex;
  justify-content: space-around;
}
/* 号源 */
.queue_item{
  display: flex;
    flex-direction: column;
    margin-top: 50px;
}
.queue_item .queue_title{
  display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
}
.queue_item .queue{
  display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
}
.el-col-18{
  max-width: 75%;
    flex: 0 0 75%;
}
.queue_item .queue .queue_left .queue_left_top{
  display: flex;
    width: 100%;
    font-size: 16px;
    color: #409eff;
    margin-bottom: 10px;
}
</style>
